<template>
  <div class="search-page flex vertical">
    <vant-form
      :validate-first="true"
      class="page-p-l page-p-r"
      input-align="right"
      validate-trigger="onSubmit"
      @submit="onSubmit"
    >
      <vant-field
        label="申请单号"
        v-model="form.reqNo"
        placeholder="请输入"
        input-align="right"
        :rules="[{  validator }]"
      />
      <vant-field
        label="车牌号码"
        v-model="form.carNo"
        placeholder="请输入"
        input-align="right"
        :rules="[{  validator }]"
      />
      <vant-cell>
        <vant-button round block type="danger">查询</vant-button>
      </vant-cell>
    </vant-form>
    <app-pull-refresh
      :maxPage="maxPage"
      :immediateCheck="immediateCheck"
      @getDate="getDate"
      ref="pullRefresh"
      class="cont-list"
    >
      <div slot="head" class="flex w-100p column-head border-bottom-gray border-top-gray">
        <span
          :class="column.width?'':'flex-1'"
          v-for="column in columns"
          :key="column.prop"
          :style="{width:column.width?column.width:'auto'}"
        >{{column.label}}</span>
      </div>
      <div v-for="(item,i)  in list" :key="i" class="flex w-100p column-cont border-b-r">
        <template v-for="column in columns">
          <span
            v-if="column.prop!=='operate'"
            :key="column.prop+i"
            class="cont-item"
            :class="column.width?'':'flex-1'"
            @click="toDetail(item,column)"
            :style="{width:column.width?column.width:'auto'}"
          >{{column.format?column.format(item,i):item[column.prop]}}</span>
          <vant-button
            v-else
            :key="column.prop+i"
            class="cont-btn"
            :style="{width:column.width?column.width:'auto'}"
            @click="toDetail(item,column)"
          >详情</vant-button>
        </template>
      </div>
    </app-pull-refresh>

    <vant-action-sheet
      v-model="visible"
      :title="actionTit"
      :actions="actions"
      description="请确认对该申请进行操作吗？确认操作后将无法退回。"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { search } from '@apis/search'
import { Vant } from '@components/Vant/index';
const { Toast, Dialog } = Vant
export default {
  name: 'SearchIndex',
  data() {
    const state = [
      { code: 1, text: '已发证' },
      { code: 2, text: '撤销' },
      { code: 3, text: '调整路线' },
      { code: 4, text: '不予许可' },
    ];
    const stateMap = state.reduce((o, cur) => {
      return o[cur.code] = cur.text, o
    }, {})
    return {
      immediateCheck: false,
      list: [],
      maxPage: 0,
      pageSize: 20,
      form: {},
      columns: [
        // { prop: 'index', label: '序号', format: (item, i) => i + 1, width: '3em' },
        { prop: 'reqNo', label: '申请单号',width:'36%',},
        { prop: 'carNo', label: '牵引车号牌',width:'25%', },
        { prop: 'state', label: '状态', format: item => stateMap[item['state']] || '' ,width:'20%',},
        { prop: 'operate', label: '操作',width:'19%',},
      ],
      state,
      visible: false,
      operate: "",
      actions: [
        { code: '1', name: '调整路线', color: '#3478F7' },
        { code: '2', name: '延期申请', color: '#3478F7' },
        { code: '3', name: '车辆变更', color: '#3478F7' },
        { code: '4', name: '撤销申请', color: '#F0880F' },
        { code: '5', name: '许可废止', color: '#EE364C' },
      ],
      selectInfo: {}
    }
  },
  computed: {
    actionTit() {
      return `${this.selectInfo.reqNo || ''}`
    },
    refresh() {
      return this.$store.getters['search/refresh']
    }
  },
  watch: {
    refresh: {
      immediate: true,
      handler(v) {
        if (v) {
          this.onSubmit();
          this.$refs.pullRefresh.refresh()
          this.$nextTick(() => {
            this.$store.dispatch('search/setRefresh', false)
          })
        }
      }
    }
  },
  methods: {
    validator() {
      const flag = this.form.reqNo || this.form.carNo
      if (!flag) {
        Toast(`请输入申请单号或者车牌号码`);
        return flag
      }

      return flag
    },
    onSubmit() {
      if (this.validator()) {
        this.list = []
        this.maxPage = 0;
        this.$refs.pullRefresh.reset()
        this.$refs.pullRefresh.check()
      }
    },
    search(currentPage) {
      return search({
        start: (currentPage - 1) * this.pageSize, //起始条数下标
        limit: this.pageSize
      }).then(res => {
        let { data: { list = [], total = 0 } = {} } = res || {};

        currentPage === 1 ? (this.list = list) : this.list.push(...list);

        this.maxPage = Math.ceil(total / this.pageSize);
      });
    },
    getDate({ curPage, type }) {
      return this.search(curPage)
        .then(() => {
          this.$refs.pullRefresh.updateState({ type })
        });
    },
    toDetail(item,column) {
      this.selectInfo = item
      if(column.prop==='state'){
         this.visible = true
      }else if(column.prop==='operate'){
        this.$router.push({
            path:'progress',
            query: this.selectInfo
          })
      }
    },
    onSelect(item) {
      const { code } = item
      this.visible = false
      if (code === '4') {
        this.revoke() // 撤销
      } else if (code === '5') {
        this.abolish()// 许可废止
      } else {

        let path = ''
        if (code === '1') {// 调整路线
          path = 'adjustRoute'
        } else if (code === '2') {// 延期申请
          path = 'delay'
        } else if (code === '3') {// 车辆变更
          path = 'vehicleChange'
        }

        this.$nextTick(() => {
          path && this.$router.push({
            path,
            query: this.selectInfo
          })
        })
      }

    },
    revoke() {
      Dialog.confirm({
        title: this.selectInfo.reqNo,
        message: '是否确认对该申请进行撤销操作？撤销后，将关闭流程.',
        beforeClose: (action, done) => {
          if (action === 'confirm') {
            done()
            this.onSubmit()
          } else {
            done();
          }
        }
      })
    },
    abolish() {
      Dialog.confirm({
        title: this.selectInfo.reqNo,
        message: '是否确认对该许可证进行废止操作？确定后该许可证将失效。',
        beforeClose: (action, done) => {
          if (action === 'confirm') {
            done()
            this.onSubmit()
          } else {
            done();
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.search-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cont-list {
  overflow: auto;
}
.column-head {
  padding: @s-10 0;
  font-size: @font-size;
  text-align: center;
}
.column-cont {
  padding: @s-10 0;
  text-align: center;
  .cont-item {
    font-size: @font-size-14;
    text-align: center;
  }
  .cont-btn {
    font-size: @font-size-14;
    padding: 0;
    border: none;
    height: auto;
  }
}
</style>